<template>
  <dk-table
    ref="DkTableRef"
    :table-api="'/adminapi/open.open?type=' + type"
    :hide-buttons="['add', 'recycle', 'edit']"
    :cache-table="!getDev()"
  >
    <template #DeleteButtonAppend>
      <el-button type="warning" class="ml" icon="Plus" @click="DkTableRef.DkTable.toggleForm('Add')">添加小程序</el-button>
    </template>

    <template #type_slot="{ row }">
      <el-tag v-if="row.type === 'dy'" type="danger">抖音小程序</el-tag>
      <el-tag v-if="row.type === 'wx'" type="success">微信小程序</el-tag>
    </template>
    <template #operation_slot="{ row }">
      <el-button type="primary" icon="Edit" @click="DkTableRef.DkTable.onTableAction('edit', { row })">设置</el-button>
      <el-button type="success" icon="Memo" @click="onClickTemplate(row)">模板</el-button>
      <el-button type="danger" icon="Delete" @click="deleteForm(row.id)">删除</el-button>
    </template>
  </dk-table>
  <el-dialog v-model="dialogVisible" title="第三方平台小程序模板列表" width="1200px" :z-index="1000">
    <dk-table
      style="min-height: 400px"
      :table-api="'/adminapi/open.open_template?type=' + type + '&open_id=' + chooseOpen.id"
      :cache-table="!getDev()"
      :hide-buttons="['recycle', 'edit']"
    >
      <template #addon_slot="{ row }">
        <div>
          <el-image :src="row.addon.icon" style="width: 40px; height: 40px"></el-image>
          <p>{{ row.addon.title }}</p>
        </div>
      </template>
    </dk-table>
  </el-dialog>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'

// 自动判断开发模式启用缓存
// @ts-ignore
import { getDev } from '@/utils/auth'

const props = defineProps({
  type: {
    default: 'dy',
    type: String
  }
})

const DkTableRef = ref()
const dialogVisible = ref(false)
const chooseOpen = ref(null)
// 提交表单
function onSubmit() {
  DkTableRef.value.DkTable.getIndex()
}

const onClickTemplate = (row) => {
  chooseOpen.value = row
  dialogVisible.value = true
}

// 删除表单
function deleteForm(id) {
  ElMessageBox.prompt('请输入"确认删除"以继续操作', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    inputPattern: /^确认删除$/,
    inputErrorMessage: '请输入"确认删除"以确认操作',
    type: 'warning'
  })
    .then(({ value }) => {
      if (value === '确认删除') {
        DkTableRef.value.DkTable.postDel([id])
      } else {
        ElMessage.info('输入不正确，已取消删除')
      }
    })
    .catch(() => {})
}

onMounted(() => {})
</script>
<style lang="scss" scoped></style>
